<template>
  <div class="mian">
    <el-card class="card">
      <el-form label-width="60px" class="form">
        <el-form-item label="学科">
          <el-select
            v-model="from.subject"
            @visible-change="visibleChange"
            placeholder="请选择"
          >
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.short_name ? item.short_name : item.id"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="阶段">
          <el-select v-model="from.step" placeholder="请选择">
            <el-option label="初级" value="1"> </el-option>
            <el-option label="中级" value="2"> </el-option>
            <el-option label="高级" value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业">
          <el-select
            v-model="from.enterprise"
            @visible-change="visibleChangeEnterprise"
            placeholder="请选择"
          >
            <el-option
              v-for="item in enterprise"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型">
          <el-select v-model="from.type" placeholder="请选择">
            <el-option label="单选" value="1"> </el-option>
            <el-option label="多选" value="2"> </el-option>
            <el-option label="简答" value="3"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form label-width="60px" class="form">
        <el-form-item label="难度">
          <el-select v-model="from.difficulty" placeholder="请选择">
            <el-option label="简单" value="1"> </el-option>
            <el-option label="一般" value="2"> </el-option>
            <el-option label="困难" value="3"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作者">
          <el-input
            v-model="from.username"
            type="text"
            style="width:220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="from.status" placeholder="请选择">
            <el-option label="禁用" value="0"> </el-option>
            <el-option label="启用" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="from.create_date" type="date">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-form label-width="60px" class="form">
        <el-form-item label="标题">
          <el-input
            v-model="from.title"
            type="text"
            style="width:430px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchEvent">搜索</el-button>
          <el-button @click="clearAway">清除</el-button>
          <el-button type="primary" @click="addEvent">+新增试题</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表格 -->
    <el-card>
      <el-table :data="list">
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50px"
        />
        <el-table-column align="center" prop="title" label="题目">
          <template v-slot="{ row }">
            <div v-html="row.title"></div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="step"
          label="学科.阶段"
          :formatter="formatterStep"
        >
          <template v-slot="{ row }">
            <div>{{ row.subject_name + '.' + formatterStep(row.step) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="type"
          label="题型"
          :formatter="formatterStatus"
        />
        <el-table-column align="center" prop="enterprise_name" label="企业" />
        <el-table-column align="center" prop="username" label="创建者" />
        <el-table-column align="center" prop="status" label="状态">
          <template v-slot="{ row }">
            <div :class="{ textColor: row.status === 0 }">
              {{ row.status === 0 ? '禁用' : '启用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="reads" label="访问量" />
        <el-table-column align="center" label="操作" width="200px">
          <template v-slot="{ row }">
            <el-button type="text" @click="editEvent(row)">编辑</el-button>
            <el-button type="text" @click="StatusEvent(row)">启用</el-button>
            <el-button type="text" @click="delEvent(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          :current-page.sync="from.page"
          :page-size.sync="from.limit"
          :page-sizes="[0, 1, 2, 3, 4, 5, 10, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getData"
          @current-change="getData"
        >
        </el-pagination>
      </div>
    </el-card>
    <add
      ref="add"
      :enterprise="enterprise"
      :subject="subject"
      @input="visibleChangeEnterprise"
      @visibleChange="visibleChange"
      @getData="getData"
    ></add>
  </div>
</template>

<script>
import {
  questionList,
  questionRemove,
  questionStatus,
  subjectList
} from '@/api/questionbank'
import { enterpriseList } from '@/api/EnterPrise'
import fromData from '@/api/constant/employess'
import Add from './components/add.vue'

export default {
  components: {
    Add
  },
  name: 'questionBankIndex',
  data () {
    return {
      list: [{}],
      from: {
        subject: '', //	否	int	学科id
        step: '', //	否	string	题目阶段:1(初级),2(中级),3(高级)
        enterprise: '', //	否	int	企业id
        type: '', //	否	int	题目类型:1(单选),2(多选),3(简答)
        difficulty: '', //	否	int	题目难度: 1(简单),2(一般),3(困难)
        username: '', //	否	string	作者
        status: '', //	否	int	状态:0(禁用),1(启用)
        create_date: '', //	否	string	创建日期
        title: '', //	否	string	标题名称
        page: 1,
        limit: 10
      },
      subject: [],
      enterprise: [],
      total: 0
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await questionList(this.from)
      this.list = res.data.items
      this.total = res.data.pagination.total
      console.log(res)
    },
    // 题型转换
    formatterStatus (row, column, cellValue, index) {
      // console.log(typeof fromData.status[0].id)
      // console.log(typeof cellValue)

      const findItem = fromData.type.find(item => item.id === cellValue)
      return findItem ? findItem.value : '-'
    },
    // 题目阶段转换
    formatterStep (cellValue) {
      // console.log(typeof fromData.status[0].id)
      // console.log(typeof cellValue)

      const findItem = fromData.step.find(item => item.id === cellValue)
      return findItem ? findItem.value : '-'
    },
    // 删除按钮点击
    delEvent (row) {
      this.$confirm('确认永久删除该项吗')
        .then(async () => {
          console.log(1)
          await questionRemove({
            id: row.id
          })
          this.$message.success('删除成功')
          this.getData()
        })
        .catch(() => {})
    },
    // 启用按钮点击
    async StatusEvent (row) {
      // console.log(1)
      const res = await questionStatus({
        id: row.id
      })
      this.$message.success('修改状态成功')
      // console.log(res)
      this.getData()
    },
    // 清除按钮点击
    clearAway () {
      this.from = {
        subject: '', //	否	int	学科id
        step: '', //	否	string	题目阶段:1(初级),2(中级),3(高级)
        enterprise: '', //	否	int	企业id
        type: '', //	否	int	题目类型:1(单选),2(多选),3(简答)
        difficulty: '', //	否	int	题目难度: 1(简单),2(一般),3(困难)
        username: '', //	否	string	作者
        status: '', //	否	int	状态:0(禁用),1(启用)
        create_date: '', //	否	string	创建日期
        title: '' //	否	string	标题名称
      }
    },
    // 学科选择框
    async visibleChange () {
      if (this.subject.length === 0) {
        const res = await subjectList({
          page: 1,
          limit: 999999
        })
        // console.log(res)
        this.subject = res.data.items
      }
    },
    // 企业选择框
    async visibleChangeEnterprise () {
      if (this.enterprise.length === 0) {
        const res = await enterpriseList({
          page: 1,
          limit: 999999
        })
        this.enterprise = res.data.items
      }
    },
    // 搜索按钮点击
    async searchEvent () {
      this.getData()
    },
    // 新增按钮点击
    addEvent () {
      this.$refs.add.isShow = true
      this.$refs.add.model = 'add'
    },
    // 编辑按钮点击
    editEvent (row) {
      this.$refs.add.isShow = true
      this.$refs.add.model = 'edit'
      this.$refs.add.from = JSON.parse(JSON.stringify(row))
    }
  }
}
</script>

<style lang="scss" scoped>
.mian {
  background-color: #ccc;
  // padding: 10px;

  .card {
    padding: 20px;
  }
  .form {
    display: flex;
    flex-wrap: wrap;
  }
}
.textColor {
  color: red;
}
</style>
